<template>
	<div>
		<van-nav-bar title="管理收货地址" left-arrow @click-left="onClickLeft" class="left"/>

		<van-address-list
		  v-model="chosenAddressId"
		  :list="list1"
		  @add="onAdd"
		  @edit="onEdit"
		  class="edit"
		>
			<van-popup
			  v-model="show"
			  closeable
			  position="bottom"
			  :style="{ height: '60%' }"
			>
			<van-address-edit
				:area-list="areaList" 
				 show-set-default
				 show-search-result
				 show-delete
				 :search-result="searchResult"
				 :area-columns-placeholder="['请选择', '请选择', '请选择']"
				@save="onSave" 
				@delete="onDelete"
				@change-detail="onChangeDetail" 
				class="btn"
			/>
			
			</van-popup>
		</van-address-list>
	</div>
</template>

<script>
	import * as api from '../api/getProlist';
	// import Vue from 'vue';
	// import { Dialog } from 'vant';
	// Vue.use(Dialog);
	export default {
		name: "ManagementAddress",
		data() {
			return {
				chosenAddressId: '',
				list:[],
				list1:[],
				list2:[],
				show:false,
				areaList: {
					province_list: {
						110000: '北京市',
						120000: '天津市',
						130000: '河北省',
						140000: '山西省',
						150000: '内蒙古自治区',
						210000: '辽宁省',
						220000: '吉林省',
						230000: '黑龙江省',
						310000: '上海市',
						320000: '江苏省',
						330000: '浙江省',
						340000: '安徽省',
						350000: '福建省',
						360000: '江西省',
						370000: '山东省',
						410000: '河南省',
						420000: '湖北省',
						430000: '湖南省',
						440000: '广东省',
						450000: '广西壮族自治区',
						460000: '海南省',
					},
					city_list: {
						110100: '北京市',
						120100: '天津市',
						130100: '石家庄市',
						130200: '唐山市',
						130300: '秦皇岛市',
						130400: '邯郸市',
						130500: '邢台市',
						130600: '保定市',
						130700: '张家口市',
						130800: '承德市',
						130900: '沧州市',
						131000: '廊坊市',
						131100: '衡水市',
						140100: '太原市',
						140200: '大同市',
						140300: '阳泉市',
						140400: '长治市',
						140500: '晋城市',
						140600: '朔州市',
						140700: '晋中市',
						140800: '运城市',
						140900: '忻州市',
						141000: '临汾市',
						141100: '吕梁市',
						150100: '呼和浩特市',
						150200: '包头市',
						150300: '乌海市',
						150400: '赤峰市',
						150500: '通辽市',
						150600: '鄂尔多斯市',
						150700: '呼伦贝尔市',
						150800: '巴彦淖尔市',
						150900: '乌兰察布市',
						152200: '兴安盟',
						152500: '锡林郭勒盟',
						152900: '阿拉善盟',
						210100: '沈阳市',
						210200: '大连市',
						210300: '鞍山市',
						210400: '抚顺市',
						210500: '本溪市',
						210600: '丹东市',
						210700: '锦州市',
						210800: '营口市',
						210900: '阜新市',
						211000: '辽阳市',
						211100: '盘锦市',
						211200: '铁岭市',
						211300: '朝阳市',
						211400: '葫芦岛市',
					},
					county_list: {
						110101: '东城区',
						110102: '西城区',
						110105: '朝阳区',
						110106: '丰台区',
						110107: '石景山区',
						110108: '海淀区',
						110109: '门头沟区',
						110111: '房山区',
						110112: '通州区',
						110113: '顺义区',
						110114: '昌平区',
						110115: '大兴区',
						110116: '怀柔区',
						110117: '平谷区',
						110118: '密云区',
						110119: '延庆区',
						120101: '和平区',
						120102: '河东区',
						120103: '河西区',
						120104: '南开区',
						120105: '河北区',
						120106: '红桥区',
						120110: '东丽区',
						120111: '西青区',
						120112: '津南区',
						120113: '北辰区',
						120114: '武清区',
						120115: '宝坻区',
						120116: '滨海新区',
						120117: '宁河区',
						120118: '静海区',
						120119: '蓟州区',
						130102: '长安区',
						130104: '桥西区',
						130105: '新华区',
						130107: '井陉矿区',
						130108: '裕华区',
						130109: '藁城区',
						130110: '鹿泉区',
						130111: '栾城区',
						130121: '井陉县',
						130123: '正定县',
						130125: '行唐县',
						130126: '灵寿县',
						130127: '高邑县',
						130128: '深泽县',
						130129: '赞皇县',
						130130: '无极县',
						130131: '平山县',
						130132: '元氏县',
						130133: '赵县',
						130181: '辛集市',
						130183: '晋州市',
						130184: '新乐市',
						130202: '路南区',
						130203: '路北区',
						130204: '古冶区',
						130205: '开平区',
						130207: '丰南区',
						130208: '丰润区',
						130209: '曹妃甸区',
						130224: '滦南县',
						130225: '乐亭县',
						130227: '迁西县',
						130229: '玉田县',
						130281: '遵化市',
						130283: '迁安市',
						130284: '滦州市',
						130302: '海港区',
						130303: '山海关区',
						130304: '北戴河区',
						130306: '抚宁区',
						130321: '青龙满族自治县',
						130322: '昌黎县',
						130324: '卢龙县',
						130390: '经济技术开发区',
						130402: '邯山区',
						130403: '丛台区',
						130404: '复兴区',
						130406: '峰峰矿区',
					},
				},
				searchResult: [],
				id:''
			};
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			onAdd() {
			  // this.$toast('新增地址');
			  this.$router.push('/addAddress')
			},
			onSave(item) {
				this.$toast('save');
				console.log(item)
				  api.editAddress({
					id:this.id,
				  	receiver:item.name,
				  	mobile:item.tel,
					regions:item.address,
					address:item.addressDetail,
					idDefault:item.isDefault,
				  }).then((data)=>{
				  	console.log(data)
					this.$toast('修改成功');
					this.show=false
				  	this.$router.push('/my')
				  });
			},
			onDelete(){
				console.log(this.id)
				api.deleteAddress({
					id:this.id,
				}).then((data)=>{
					console.log(data)
				});
			},
			onEdit(item,index) {
				console.log(item,index)
				this.id=item.id
			  this.show= !this.show
			  let ipts = document.getElementsByClassName('van-field__control')
			  let swi = document.getElementsByClassName('van-switch')
			  console.log(ipts[index])
			  console.log(item.address)
			  ipts[0].placeholder=item.name
			  console.log(ipts[index].placeholder)
			  ipts[1].placeholder=item.tel
			  ipts[2].placeholder=item.address
			  ipts[3].placeholder=item.addressDetail
			  swi.checked=item.isDefault
			  console.log(swi.checked)
			  if(swi.checked==true){
				  swi[0].className='van-switch van-switch--on'
			  }else{
				  swi[0].className='van-switch'
			  }
			  console.log(swi)
			  
			
			},
			onChangeDetail(val) {
				if (val) {
					this.searchResult = [{
						name: '黄龙万科中心',
						address: '杭州市西湖区'
					}];
				} else {
					this.searchResult = [];
				}
			}
		},
		mounted(){
			api.addressList({
				per:10,
				page:1
			}).then((data)=>{
				console.log(data.data)
				this.list = data.data.addresses
				console.log(this.list[0].address)
				// this.list1=this.list
				this.list.forEach((v,i)=>{
					console.log(v.receiver)
					this.list1.push({name:v.receiver,id:v._id,tel:v.mobile,address:v.regions,addressDetail:v.address,isDefault:v.isDefault})
					console.log(this.list1[i].isDefault)
					if(this.list1[i].isDefault==true){
						this.chosenAddressId= this.list1[i].id
					}
				})
				console.log(this.list1)
				
			});
		},
	}
</script>

<style scoped="">
	
	.van-nav-bar__title {
		color: #fff;
		font-size: 14px;
	}

	.van-nav-bar {
		height: 46px;
		background: #d46170;
	}


	.van-button--danger {
		background: #d4616e;
		border: 1px solid #d4616e;
		color: #f8f2e6;
	}
	.edit .van-icon{color: #333;}
	
	
	.left .van-icon{
		color: #FFF;
		font-size: 12px;
	}
</style>
